<template>
  <view class="userContainer">
	<u--image
		width="90"
		height="90"
		:src="userInfo.pic"
		shape="circle"
		errorIcon="/static/images/loginPic.png"
		@click="toUpdateInfo"
	></u--image>
    <view class="infoWrap" v-if="isLogin" @click="toUpdateInfo">
		<view class="info">
			<text class="nickname">{{userInfo.nickname}}</text>
			<text class="sign">{{userInfo.sign?userInfo.sign:'为了彰显您的个性,写点什么吧！'}}</text>
			<view class="bottom">
			  <u-tag
						:text="'VIP'+userInfo.isVip"
						type="error"
						size="mini"
						:show="userInfo.isVip !== '0'"
			  />
			  <text class="fav">{{userInfo.fav}}</text>
			</view>
		</view>
		<text class="iconfont icon-qianjin" ></text>
    </view>
    <view class="tip" v-else @click="toLogin">登录后获取更多信息！</view>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['isLogin']),
    ...mapState({
      userInfo: state => state.auth.userInfo
    })
  },
  methods: {
    toLogin () {
      uni.navigateTo({
        url: '/subcom-my/Auth/Auth'
      })
    },
    toUpdateInfo () {
      uni.navigateTo({ url: '/subcom-my/UpdateInfo/UpdateInfo' })
    }
  }
}
</script>

<style lang="scss">
.userContainer {
	width: 100%;
	height: 260rpx;
	background-color: rgb(31, 182, 131);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 20rpx;
    .infoWrap {
		flex: 1;
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		.info{
			flex: 1;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.nickname {
			  font-size: 28rpx;
			  color: rgb(108, 108, 108);
			}
			.sign {
			  font-size: 22rpx;
			  color: rgb(138, 138, 138);
			}
			.bottom {
			  width: 200rpx;
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  .fav {
			    font-size: 36rpx;
			    color: rgb(204, 138, 32);
			    font-weight: bold;
			  }
			}
		}
		.icon-qianjin {
			height: 200rpx;
			line-height: 200rpx;
			font-size: 32rpx;
			color: rgb(203, 235, 224);
		}
   }
	.tip {
		flex:1;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: rgb(163, 223, 203);
	}

}
</style>
